/**
 * @description 首页-头部页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, InputNumber, Radio, Select, Divider, Tooltip } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';
import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import { copyTemplate, pasteTemplate } from '@/utils/clipboard';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';


// 标题和后缀现实的开关
const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]

const dotPosOptions = [
  {
    label: '上',
    value: 'top'
  },
  {
    label: '下',
    value: 'bottom'
  },
  {
    label: '左',
    value: 'left'
  },
  {
    label: '右',
    value: 'right'
  },
]


function BannerAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------

  let items = useMemo(() => {
    const items = [
      {
        key: 'base',
        label: '基础属性',
        children:
          <>
            <Form.Item
              label="显示箭头"
              name={['base', 'arrows']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'arrows'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="自动切换"
              name={['base', 'autoplay']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'autoplay'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="自动切换的间隔（毫秒）"
              name={['base', 'autoplaySpeed']}
            >
              <InputNumber
                min={100}
                precision={0}
                onChange={(value) => onConfigEvent(['base', 'autoplaySpeed'], value)}
              />
            </Form.Item>

            <Form.Item
              label="面板指示点"
              name={['base', 'dots']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'dots'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="面板指示点位置"
              name={['base', 'dotPosition']}
            >
              <Select
                options={dotPosOptions}
                onChange={(value) => onConfigEvent(['base', 'dotPosition'], value)}
              />
            </Form.Item>

            <Divider></Divider>
            <Form.Item
              label="首页展示"
              name={['base', 'homeFlag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'homeFlag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="其它页面展示"
              name={['base', 'otherFlag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'otherFlag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

          </>
      },
      {
        key: 'box',
        label:
          <Tooltip title='总盒子的高度，建议与图片高度 一致'>
            总盒子
            <InfoCircleOutlined className='tooltip-icon' />
          </Tooltip>,
        children: <StyleWrapper form={form} preKeys={['banner_box', 'default']} onStyleChange={() => upateStyleEvent(['banner_box'])} />
      },
      {
        key: 'pre',
        label: '左箭头',
        children: <Collapse accordion size='middle' items={[
          {
            key: 'box',
            label: '盒子',
            children: <StyleWrapper form={form} preKeys={['banner_pre', 'default']} onStyleChange={() => upateStyleEvent(['banner_pre'])} />
          },
          {
            key: 'box-hover',
            label: '盒子-悬浮',
            children: <StyleWrapper form={form} preKeys={['banner_pre', 'hover']} onStyleChange={() => upateStyleEvent(['banner_pre'])} />
          },
          {
            key: 'icon',
            label: '图标',
            children: <StyleWrapper form={form} preKeys={['banner_pre_icon', 'default']} onStyleChange={() => upateStyleEvent(['banner_pre_icon'])} />
          },
        ]} />
      },
      {
        key: 'next',
        label: '右箭头',
        children: <Collapse accordion size='middle' items={[
          {
            key: 'box',
            label: '盒子',
            children: <StyleWrapper form={form} preKeys={['banner_next', 'default']} onStyleChange={() => upateStyleEvent(['banner_next'])} />
          },
          {
            key: 'box-hover',
            label: '盒子-悬浮',
            children: <StyleWrapper form={form} preKeys={['banner_next', 'hover']} onStyleChange={() => upateStyleEvent(['banner_next'])} />
          },
          {
            key: 'icon',
            label: '图标',
            children: <StyleWrapper form={form} preKeys={['banner_next_icon', 'default']} onStyleChange={() => upateStyleEvent(['banner_next_icon'])} />
          },
        ]} />
      },
      {
        key: 'dot',
        label: "指示点",
        children: <Collapse accordion size='middle' items={[
          {
            key: 'box',
            label: '盒子',
            children: <StyleWrapper form={form} preKeys={['banner_dot_box', 'default']} onStyleChange={() => upateStyleEvent(['banner_dot_box'])} />
          },
          {
            key: 'dot',
            label: '指示点',
            children: <StyleWrapper form={form} preKeys={['banner_dot', 'default']} onStyleChange={() => upateStyleEvent(['banner_dot'])} />
          },
          {
            key: 'dot-hover',
            label: '指示点-悬浮',
            children: <StyleWrapper form={form} preKeys={['banner_dot', 'hover']} onStyleChange={() => upateStyleEvent(['banner_dot'])} />
          },
          {
            key: 'dot-active',
            label: '指示点-激活',
            children: <StyleWrapper form={form} preKeys={['banner_dot_active', 'default']} onStyleChange={() => upateStyleEvent(['banner_dot_active'])} />
          },
        ]} />
      },
      {
        key: 'img',
        label: "图片",
        children: <StyleWrapper form={form} preKeys={['banner_img', 'default']} onStyleChange={() => upateStyleEvent(['banner_img'])} />
      }
    ]

    return items
  }, [updateCtx.updateFlag])



  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='banner'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(BannerAttr) 